<template>
  <!--Vue3组件中的模板结构可以没有根标签-->
  <h1>我是Demo组件</h1>
  <h2>姓名{{ person.name }}</h2>
  <h2>年龄{{ person.age }}</h2>
  <button @click="test">点我</button>
</template>

<script>
import {reactive} from "vue";

export default {
  name: "Demo",
  props: ['address', 'sex'],
  setup(props, context) {
    // 响应式对象/数组数据 本质是个Proxy对象
    let person = reactive({
      name: '张三',
      age: 23,
    });

    function test() {
      context.emit('hello', '子组件发来的');
    }

    // 返回一个对象
    return {
      person,
      test
    };
  }
}
</script>

<style scoped>

</style>